import React from 'react';
import withStyles from 'material-ui/styles/withStyles';
import MuiButton from 'material-ui/Button/Button';

const style = ({palette: {secondary, grey}, spacing: {unit}}) => ({
  root: {
    color: '#fff',
    fontSize: '1.3rem',
    borderRadius: '50%',
    padding: unit *2,
    background: `linear-gradient(to top, ${secondary[400]}, ${secondary[200]})`,
    '&:hover': {
      background: `linear-gradient(to top, ${secondary[500]}, ${secondary[300]})`,
    }
  },
  disabled: {
    color: grey[500],
    background: `linear-gradient(to top, ${grey[400]}, ${grey[200]})`,
  },
  label: {
    fontFamily: 'FZXSHK',
  }
});

const Button = withStyles(style)((props) => (
  <MuiButton {...props}/>
))

export default Button;
